<template>
  <div class="app-container calendar-list-container">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="订单话术" name="first" v-if="['1', '4', '5', '7'].indexOf(per) > -1">
        <div class="select-item">
          <span>分类</span>
          <el-select v-model="value" placeholder="请选择" @change = "changeSelected" >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <i class="el-icon-setting" @click="getTypeList"></i>
        </div>
        <component :is="allList" :list="list" :listLoading="listLoading" :options="options" v-on:get-list="getList" v-on:get-words="getWords" v-on:update-words="updateWords" v-on:add-words="addWords"></component>
      </el-tab-pane>
      <el-tab-pane label="报销话术" name="second" v-if="['2', '4', '6', '7'].indexOf(per) > -1">
        <div class="select-item">
          <span>分类</span>
          <el-select v-model="value" placeholder="请选择" @change = "changeSelected" >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <i class="el-icon-setting" @click="getTypeList"></i>
        </div>
        <component :is="allList" :list="list" :listLoading="listLoading" :options="options" v-on:get-list="getList" v-on:get-words="getWords" v-on:update-words="updateWords" v-on:add-words="addWords"></component>
      </el-tab-pane>
      <el-tab-pane label="理赔话术" name="third" v-if="['3', '5', '6', '7'].indexOf(per) > -1">
        <div class="select-item">
          <span>分类</span>
          <el-select v-model="value" placeholder="请选择" @change = "changeSelected">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <i class="el-icon-setting" @click="getTypeList"></i>
        </div>
        <component :is="allList" :list="list" :listLoading="listLoading" :options="options"  v-on:get-list="getList" v-on:get-words="getWords" v-on:update-words="updateWords" v-on:add-words="addWords"></component>
      </el-tab-pane>
    </el-tabs>
    <div v-show="pageLoading" class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
                     :page-sizes="[5,10,20,30, 50]" :page-size="listQuery['per-page']" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog width="360px" title="话术列表" :visible.sync="dialogTableVisible" class="dialog-type">
      <el-table :data="typeData" height="400"  v-loading="typeLoading" element-loading-text="给我一点时间">
        <el-table-column label="分类ID" width="150" v-if="false">
          <template slot-scope="scope">
            <span v-html="scope.row.type_id"></span>
          </template>
        </el-table-column>
        <el-table-column label="分类名称" width="200">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sub_type_name" v-show="scope.row.editTagName" :maxlength="20"></el-input>
            <span v-html="scope.row.sub_type_name" v-show="!scope.row.editTagName"></span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <i class="el-icon-edit" v-show="!scope.row.editTagName" @click="handleEdit(scope.$index, scope.row)"></i>
            <i class="el-icon-delete" v-show="!scope.row.editTagName" @click="handleDelete(scope.$index, scope.row)"></i>
            <i class="el-icon-check" v-if="scope.row.editTagName && !scope.row.addTagName" @click="submitEdit(scope.$index, scope.row)"></i>
            <i class="el-icon-close" v-if="scope.row.editTagName && !scope.row.addTagName" @click="cancleEdit(scope.$index, scope.row)"></i>
            <i class="el-icon-check" v-if="scope.row.editTagName && scope.row.addTagName" @click="submitAdd(scope.$index, scope.row)"></i>
            <i class="el-icon-close" v-show="scope.row.editTagName && scope.row.addTagName" @click="cancleAdd(scope.$index, scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="type-footer">
        <span @click="handleAdd"><i class="el-icon-circle-plus-outline"></i>添加分类</span>
      </div>
    </el-dialog>
  </div>
</template>
<style>
  .select-item{
    float:right;
  }
  .select-item>span{
    display: inline-block;
    font-size: 14px;
    margin-right:5px;
  }
  .select-item>i{
    font-size:24px;
    vertical-align: middle;
    margin-left:5px;
  }
  .dialog-type i{
    margin-right:8px;
    cursor:pointer;
  }
  div.type-footer{
    color:#45b9fe;
    text-align: left;
    padding-bottom:10px;
    padding-left:5px;
    cursor: pointer;
  }
  div.el-dialog div.el-select{
    width:100%
  }
</style>
<script>
  import { typeList, deleteWords, getWordsList, updateWords, addWords, updateType, deleteType, addType } from '@/api/group'
  import wordslist from './components/wordslist' // 话术列表
  import { hasWordPermission } from '@/utils'

  export default{
    name: 'wordsTable',
    data() {
      return {
        allList: wordslist,
        activeName: 'first',
        tableKey: 0,
        list: null,
        total: null,
        per: '7',
        listLoading: true,
        pageLoading: false,
        options: [],
        value: '',
        dialogTableVisible: false,
        typeData: null,
        typeName: '',
        typeLoading: true,
        oldEditValue: '',
        listQuery: {
          page: 1,
          'per-page': 20
        }
      }
    },
    created() {
      this.per = hasWordPermission()
      if (this.per === '1') {
        this.activeName = 'first'
      } else if (this.per === '2') {
        this.activeName = 'second'
      } else if (this.per === '3') {
        this.activeName = 'third'
      } else if (this.per === '4') {
        this.activeName = 'first'
      } else if (this.per === '5') {
        this.activeName = 'first'
      } else if (this.per === '6') {
        this.activeName = 'second'
      } else if (this.per === '7') {
        this.activeName = 'first'
      }
      // 初始化函数
      this.getList()
    },
    methods: {
      getList(parameter) {
        this.listLoading = true
        // 判断订单、报销、理赔
        if (this.activeName === 'first') {
          this.options = []
          typeList(Object.assign({}, { tid: 1 })).then(response => {
            for (var i = 0; i < response.data.length; i++) {
              var json = { value: parseInt(response.data[i].type_id), label: response.data[i].sub_type_name }
              this.options.push(json)
            }
            this.value = this.options[0].value
            const obj = { type_id: this.options[0].value }
            if (parameter != null && parameter !== undefined) {
              obj.type_id = parameter
              this.value = parameter
            }
            getWordsList(Object.assign({}, this.listQuery, obj)).then(response => {
              this.list = response.data.data
              this.total = response.data._meta.totalCount
              this.listLoading = false
              if (this.total > 0) {
                this.pageLoading = true
              } else {
                this.pageLoading = false
              }
            })
          })
        } else if (this.activeName === 'second') {
          this.options = []
          typeList(Object.assign({}, { tid: 2 })).then(response => {
            for (var i = 0; i < response.data.length; i++) {
              var json = { value: parseInt(response.data[i].type_id), label: response.data[i].sub_type_name }
              this.options.push(json)
            }
            this.value = this.options[0].value
            const obj = { type_id: this.options[0].value }
            if (parameter != null && parameter !== undefined) {
              obj.type_id = parameter
              this.value = parameter
            }
            getWordsList(Object.assign({}, this.listQuery, obj)).then(response => {
              this.list = response.data.data
              this.total = response.data._meta.totalCount
              this.listLoading = false
              if (this.total > 0) {
                this.pageLoading = true
              } else {
                this.pageLoading = false
              }
            })
          })
        } else if (this.activeName === 'third') {
          this.options = []
          typeList(Object.assign({}, { tid: 3 })).then(response => {
            for (var i = 0; i < response.data.length; i++) {
              var json = { value: parseInt(response.data[i].type_id), label: response.data[i].sub_type_name }
              this.options.push(json)
            }
            this.value = this.options[0].value
            const obj = { type_id: this.options[0].value }
            if (parameter != null && parameter !== undefined) {
              obj.type_id = parameter
              this.value = parameter
            }
            getWordsList(Object.assign({}, this.listQuery, obj)).then(response => {
              this.list = response.data.data
              this.total = response.data._meta.totalCount
              this.listLoading = false
              if (this.total > 0) {
                this.pageLoading = true
              } else {
                this.pageLoading = false
              }
            })
          })
        }
      },
      changeSelected() {
        this.getList(this.value)
      },
      handleClick() {
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery['per-page'] = val
        this.getList(this.value)
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList(this.value)
      },
      handleModifyStatus(row, status) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        row.status = status
      },
      getWords(str) {
        if (str === '') {
          this.$alert('请先勾选想要删除的话术', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          }).then(() => {})
        } else {
          this.$confirm('此操作将永久删除改话术，是否继续', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.listLoading = true
            const param = {}
            param.talk_ids = str
            const tempData = Object.assign({}, param)
            deleteWords(tempData).then(() => {
              this.getList(this.value)
              this.$message({
                type: 'success',
                message: '删除成功',
                onClose: () => {
                }
              })
            })
          }).catch(() => {
            this.message({
              type: 'info',
              message: '已取消删除'
            })
          })
        }
      },
      updateWords(data) {
        // 修改数据
        updateWords(data).then(() => {
          this.getList(this.value)
          return true
        })
      },
      addWords(data) {
        // 新增数据
        addWords(data).then(() => {
          this.getList(this.value)
          return true
        })
      },
      getTypeList() {
        // 获取分类列表
        this.dialogTableVisible = true
        if (this.activeName === 'first') {
          typeList(Object.assign({}, { tid: 1 })).then(response => {
            for (var i = 0; i < response.data.length; i++) {
              response.data[i] = Object.assign(response.data[i], { editTagName: false })
            }
            this.typeData = response.data
            this.typeLoading = false
          })
        } else if (this.activeName === 'second') {
          typeList(Object.assign({}, { tid: 2 })).then(response => {
            for (var i = 0; i < response.data.length; i++) {
              response.data[i] = Object.assign(response.data[i], { editTagName: false })
            }
            this.typeData = response.data
            this.typeLoading = false
          })
        } else if (this.activeName === 'third') {
          typeList(Object.assign({}, { tid: 3 })).then(response => {
            for (var i = 0; i < response.data.length; i++) {
              response.data[i] = Object.assign(response.data[i], { editTagName: false })
            }
            this.typeData = response.data
            this.typeLoading = false
          })
        }
      },
      handleEdit(index, row) {
        // 修改分类名称
        row.editTagName = true
        this.oldEditValue = row.sub_type_name
      },
      submitEdit(index, row) {
        if (row.sub_type_name === '' || row.sub_type_name === undefined) {
          this.$message({
            type: 'warning',
            message: '分类名称不能为空'
          })
        } else {
          var flag = true
          if (row.sub_type_name === this.oldEditValue) {
            flag = false
            this.$message({
              type: 'warning',
              message: '没有任何修改'
            })
          }
          if (flag) {
            const tempData = Object.assign({}, { type_id: row.type_id }, { sub_type_name: row.sub_type_name })
            updateType(tempData).then(() => {
              row.editTagName = false
              for (const item of this.typeData) {
                if (item.type_id === row.type_id) {
                  item.sub_type_name = row.sub_type_name
                }
              }
              this.$message({
                type: 'success',
                message: '修改成功'
              })
            })
          }
        }
      },
      cancleEdit(index, row) {
        row.editTagName = false
      },
      handleDelete(index, row) {
        // 删除分类
        this.$confirm('删除分类后，此分类下的话术也将被清空，是否确认删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const tempData = Object.assign({}, { type_id: row.type_id })
          deleteType(tempData).then(() => {
            for (const item of this.typeData) {
              if (item.type_id === row.type_id) {
                const index = this.typeData.indexOf(item)
                this.typeData.splice(index, 1)
                this.options = []
                for (var i = 0; i < this.typeData.length; i++) {
                  var json = { value: parseInt(this.typeData[i].type_id), label: this.typeData[i].sub_type_name }
                  this.options.push(json)
                }
                this.value = this.options[0].value
                getWordsList(Object.assign({}, this.listQuery, { type_id: this.options[0].value })).then(response => {
                  this.list = response.data.data
                  this.total = response.data._meta.totalCount
                  this.listLoading = false
                })
              }
            }
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          })
        }).catch(() => {
        })
      },
      handleAdd() {
        // 添加分类
        var flag = true
        for (var item of this.typeData) {
          if (item.sub_type_name === '' && item.addTagName === true) {
            flag = false
          }
        }
        if (flag) {
          const obj = { sub_type_name: '', editTagName: true, addTagName: true }
          this.typeData.push(obj)
        } else {
          this.$message({
            type: 'warning',
            message: '请先输入您要添加的分类'
          })
        }
      },
      submitAdd(index, row) {
        if (row.sub_type_name.trim().length === 0) {
          this.$message({
            type: 'warning',
            message: '分类名称不能为空'
          })
        } else {
          var tempData = {}
          if (this.activeName === 'first') {
            tempData = Object.assign({}, { tid: '1' }, { sub_type_name: row.sub_type_name })
          } else if (this.activeName === 'second') {
            tempData = Object.assign({}, { tid: '2' }, { sub_type_name: row.sub_type_name })
          } else if (this.activeName === 'third') {
            tempData = Object.assign({}, { tid: '3' }, { sub_type_name: row.sub_type_name })
          }
          addType(tempData).then((response) => {
            row.editTagName = false
            this.options.push({ value: response.data.id, label: row.sub_type_name })
            for (var item of this.typeData) {
              if (item.sub_type_name === row.sub_type_name) {
                var num = this.typeData.indexOf(item)
                this.typeData.splice(num, 1, { type_id: response.data.id, sub_type_name: row.sub_type_name, editTagName: false })
              }
            }
            this.$message({
              type: 'success',
              message: '新增成功'
            })
          })
        }
      },
      cancleAdd(index, scope) {
        this.typeData.splice(index, 1)
      }
    }
  }
</script>
